import React from 'react';
import SubHeaderComponent from '../../../components/subHeader';
import Pdf from '@mikecousins/react-pdf';
import Css from '../../../assets/css/home/report/index.css';

class Report extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            page: 1
        }
    }

    //设置当前页数
    setPage(pageNum){
        this.setState({ page: pageNum });
    }

    render(){
        const { page } = this.state;
        return (
            <div className={Css['page']}>
                <SubHeaderComponent title="气象信息快报" />
                <div className={Css['main']}>
                    <Pdf file={require('../../../assets/data/test.pdf')} page={page}>
                        {({ pdfDocument, pdfPage, canvas }) => (
                            <>
                            {!pdfDocument && <div className={Css['loading']}></div>}
                            {canvas}
                            {Boolean(pdfDocument && pdfDocument.numPages) && (
                                <nav>
                                <ul className={Css['pager']}>
                                    <li className={Css['previous']}>
                                    <button
                                        type="primary"
                                        disabled={page === 1}
                                        onClick={() => this.setPage(page - 1)}
                                    >
                                        上一页
                                    </button>
                                    </li>
                                    <li className={Css['next']}>
                                    <button
                                        disabled={page === pdfDocument.numPages}
                                        onClick={() => this.setPage(page + 1)}
                                    >
                                        下一页
                                    </button>
                                    </li>
                                </ul>
                                </nav>
                            )}
                            </>
                        )}
                        </Pdf>
                </div>
            </div>
        )
    }
}

export default Report;